@import "@/styles/variables.scss";
.container_page {
  height: 100vh;
  width: 100vw;
  background-color: #eff1f7;

  .select_type {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .selector {
      font-weight: bold;
    }

    view[class*="cuIcon"] {
      margin-left: 12rpx;
      display: inline-block;
    }

    .btn_childType {
      font-size: 48rpx;
      color: #333;
      padding: 0 20rpx;
      border-radius: 20rpx;
      background: white;
    }
  }

  .header {
    margin-bottom: 24rpx;

    .select_type {
      margin-bottom: 48rpx;

      .selector {
        color: white;
        font-size: 38rpx;
      }
    }

    background-color: $OVERALL_SITUATION_BACKGROUND;
    border-radius: 0 0 20rpx 20rpx;
    padding: 24rpx;

    .search {
      .search_bar {
        display: flex;
        line-height: 80rpx;
        font-size: 36rpx;

        .search_input {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: white;
          padding: 0 24rpx;
          border-radius: 20rpx;

          input {
            flex: 1;
            font-size: 36rpx;
          }
        }
      }
    }
  }

  .fold {
    width: 0;
  }

  .unfold {
    width: 100vw !important;
  }

  // 折叠部分
  .pane_childType {
    width: 0;
    height: 100vh;
    position: absolute;
    transition: 0.2s;
    top: 0;
    z-index: 999;
    overflow: hidden;

    .layer_mask {
      z-index: -1;
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
    }

    .card_childType {
      width: 65vw;
      height: 100vh;
      padding: 200rpx 24rpx 24rpx;
      border-radius: 0 20rpx 20rpx 0;
      background: white;

      .selector {
        color: #335ac6;
        font-weight: bold;
        font-size: 28rpx;
        margin-bottom: 24rpx;
      }

      .scrollPane {
        overflow-y: auto;
        // 100vh - 卡片顶部內间距 - 标题高 - 折叠面板上下內间距
        max-height: calc(100vh - 200rpx - 36rpx - 48rpx);

        .bar_childType {
          color: #333;
          font-size: 28rpx;
          padding: 24rpx 0;
          border-bottom: 2rpx solid #ddd;

          .count {
            margin-left: 24rpx;
            display: inline-block;
            color: #999;
          }

          &:active {
            background: rgba(51, 90, 198, 0.3);
          }
        }
      }
    }
  }

  .main {
    // 设备详情卡片
    .card_equimpent {
      position: relative;
      padding: 24rpx;
      background-color: white;
      border-radius: 20rpx;
      margin-bottom: 24rpx;

      &::before {
        content: "";
        position: absolute;
        width: 8rpx;
        height: 50%;
        top: 25%;
        left: 0;
        border-radius: 0 8rpx 8rpx 0;
      }

      &::after {
        position: absolute;
        right: 0;
        top: 0;
        color: white;
        line-height: 48rpx;
        font-size: 20rpx;
        padding: 0 24rpx;
        border-radius: 0 20rpx 0 20rpx;
      }

      .title {
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 24rpx;
      }

      .count {
        display: flex;
        margin-bottom: 20rpx;

        & > view {
          flex: 1;
          text-align: center;

          .number {
            color: #333;
            font-weight: bolder;
            font-size: 48rpx;
          }
        }
      }
    }

    // 数量配齐
    .card_equimpent.enough {
      &::before {
        background-color: $OVERALL_SITUATION_BACKGROUND;
      }

      &::after {
        content: "已配齐";
        background: $OVERALL_SITUATION_BACKGROUND;
      }
    }

    // 数量没配齐
    .card_equimpent.scarce {
      &::before {
        background: #e81a1a;
      }

      &::after {
        content: "未配齐";
        background: #e81a1a;
      }
    }
  }
}
